<template>
  <div class="addPlace">
    <div class="top">
      <el-button>动态广告位</el-button>
      <el-button>商城广告位</el-button>
      <el-button>个人中心广告位</el-button>
    </div>
    <div class="sectionOne">
      <el-row>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            注：建议宽度尺寸：750px，高度自定义
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light" style="text-align: right">
            <el-button style="width:87px;background-color: #1BA687;color:#ffffff" size="small">添加</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="sectionTwo">
      <el-row class="first">
        <el-col :span="2"><div class="grid-content bg-purple-dark">序号</div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple-dark">图片/视频</div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple-dark">位置</div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-dark">详情链接</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-dark">操作</div></el-col>
      </el-row>
      <el-row class="second">
        <el-col :span="2">
          <div class="grid-content bg-purple-dark">1</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-dark img">
            <p class="cover">
              <label class="upload">
                <input type="file" @change="getImg(item.id,$event)">
              </label>
              <i class="el-icon-picture"></i>
              <img src="http://img0.imgtn.bdimg.com/it/u=1519175636,579560806&fm=26&gp=0.jpg" alt="">
            </p>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-dark sort">
            <el-select v-model="value" clearable placeholder="请选择" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark detailLink">
            <el-input
              size="mini"
              style="width:336px"
            >
            </el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-button type="info" size="small" style="width:70px;height:34px;background-color: #2B333E">删除</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="paging">
      <el-pagination
        background
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddPlace',
  data() {
    return {
      options: [{
        value: '选项1',
        label: '无关注广告'
      }, {
        value: '选项2',
        label: '链接区下方'
      }, {
        value: '选项3',
        label: '每隔5条动态下方'
      }, {
        value: '选项4',
        label: '每隔10条动态下方'
      }, {
        value: '选项5',
        label: '每隔15条动态下方'
      }, {
        value: '选项6',
        label: '每隔20条动态下方'
      }],
      value: ''
    }
  }
}
</script>

<style scoped lang="scss">
  .addPlace{
    margin-top:20px;
    margin-left:20px;
    .top{
      color:#ffffff;
    }
    .sectionOne{
      width:99%;
      margin-top:20px;
      color:#E51C23;
      font-size:14px;

    }
    .sectionTwo{
      overflow: auto;
      width:99%;
      max-height: 650px;
      margin-top:20px;
      .grid-content{
        border:1px solid #DDDDDD;
      }
      .first{
        line-height:30px;
        background-color: #F5F5F5;
        font-size: 14px;
        text-align: center;
      }
      .second{
        height:100px;
        line-height:100px;
        background-color: rgba(248, 248, 248, 1);
        text-align: center;
        .img{
          .cover{
            position:relative;
            width: 138px;
            line-height: 79px;
            margin:10px auto;
            text-align: center;
            background-color: #eeeeee;
            .el-icon-picture{
              font-size: 15px;
              color: #8c939d;
            }
            .upload{
              position:absolute;
              top:0;
              left:0;
              width:100%;
              height:100%;
              z-index: 10;
              input{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                opacity: 0;
              }
            }
            img{
              position:absolute;
              top:0;
              left:0;
              width:100%;
              height:100%;
            }
          }

        }
        .detailLink{
          height:102px;
          .link{
            width: 336px;
            height: 25px;
            margin:36px auto;
            background-color: #eeeeee;
            color: #333333;
            line-height: 20px;
            text-align: center;
            font-size: 14px;
            border: 1px solid #bbbbbb;
          }
        }
        .sort{
          height:102px;
          .sort{
            width: 102px;
            height: 25px;
            margin:36px auto;
            background-color: #eeeeee;
            color: #333333;
            line-height: 20px;
            text-align: center;
            font-size: 14px;
            border: 1px solid #bbbbbb;
          }
        }
      }
    }
    .paging{
      float:right;
      margin-top:20px;
    }
  }
</style>
